[Day03] 嗚咿咿啊咿：淺談HTML的語法

17th鐵人賽前端迷走中

團隊好想工作室 v 9.0

2025-09-17 14:11:25

33 瀏覽

分享至

昨天我們提到了網頁的基本結構，今天要進一步說明HTML的語法，還有一些需要注意的鋩鋩角角（mê-mê-kak-kak）。

元素 Elements

HTML由一系列的元素所組成，像是<html>、<head>、<body>等。

一個元素通常由成對的開始標籤與結束標籤組成，將內容夾在其中，如下圖所示。
開始與結束標籤類似，都是將元素名稱包在成對的角括號<>之中，但結束標籤在元素名稱之前多加了斜線/。

example of elements
圖片來源：MDN, Basic HTML syntax

空元素 Void elements

不過，並非所有的元素都需要以成對的開始與結束標籤組成。
由單一標籤組成的元素，稱作空元素（Void elements），像是<img>、<meta>、<link>等。

空元素通常會在標籤的結尾加入斜線/，並與元素名稱相隔一個空格，就像下列的程式碼一樣。
雖然沒有加上斜線也不會怎樣，但如此這個檔案要被當作XML使用時就會出錯。[1]

<img src="images/cat.jpg" alt="cat" />

元素的巢狀結構

一個元素裡面又可以包含另一個元素，但要記得將另一個元素夾在其開始與結束標籤之中。
就像是俄羅斯娃娃一樣，是由對應的上半身與下半身一層一層相互組合。如果不同元素的開始與結尾標籤彼此交錯穿插，如下列的程式碼一般，可能會產生錯誤。

<b><p>注意注意</b>，豆芽剛剛咬了線。</p>

空元素因為只由單一標籤組成，沒有結束標籤，裡面就不能再包含其他元素。[2]

屬性 Attributes

example of Attributes
圖片來源：MDN, Basic HTML syntax

可以為HTML的元素加上屬性，以補充說明元素的詳細資訊。這些資訊如同標籤本身一樣，不會顯示在網頁上。

元素的屬性寫在開始標籤的元素名稱之後，與元素名稱相隔一個空格。屬性名稱與屬性值之間以等號=相連接，屬性值需要以成對的單引號'或雙引號"包起來。一個元素可以同時設定多個屬性，但彼此需要以空格相隔。

為元素添加屬性時需要注意以下事項，不然可能會產生錯誤[1]：

為每個屬性值加上引號。雖然引號可以省略，但如果屬性值包含空格，空格之後的詞可能會被當作其他屬性。
避免混用單引號與雙引號。
避免在引號中放入同一種引號。若屬性值裡有單引號，屬性值就要用雙引號包起來。反之亦然。

雖然屬性名稱與屬性值之間的等號，可以在前後加上空格。但W3Schools建議不要加上空格，如此比較好閱讀。[3]

布林屬性 Boolean attributes

有些屬性只要添加在元素裡面，其屬性值就會被設定為true，不論其本身是否有設定屬性值，或是將屬性值設定成什麼內容。反之，只要沒有為元素添加這類屬性，其屬性值就會被設定為false。
這樣的屬性稱作布林屬性（Boolean attributes）。如果要為元素添加布林屬性，通常會將其屬性值設定為空字串或屬性本身的名字。[1]

下列程式碼是HTML規範中有關布林屬性的範例，其中的checked跟disabled都是布林屬性。由於這類屬性只要添加進元素，值就會被設為true，因此三段程式碼實際上是相同的意思。[4]

<!--
  Here is an example of a checkbox that is checked and disabled. 
  The checked and disabled attributes are the boolean attributes.
-->
<label><input type=checkbox checked name=cheese disabled> Cheese</label>

<!-- This could be equivalently written as this: -->
<label><input type=checkbox checked=checked name=cheese disabled=disabled> Cheese</label>

<!-- You can also mix styles; the following is still equivalent: -->
<label><input type='checkbox' checked name=cheese disabled=""> Cheese</label>

註解

如果需要在HTML檔案中加上註解，需要將其包在之中，如下列程式碼所示，如此在瀏覽器上就不會看到註解內容。
如果註解內容有多行，則建議內容與前後的標記之間要換行，且各行內容的開頭以兩個空格縮排。[3]

<!-- This is a comment -->

<!--
  This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example.
-->

其他注意事項

避免混用大小寫

HTML的元素名稱與屬性名稱沒有區分大小寫，因此<title>也可以寫成<TITLE>或<Title>。但還是建議都使用小寫。這樣比較好閱讀，也能維持一致性。[1]

換行符與多餘空格會被省略

元素的內容中，若有連續相接的複數空格，則最終瀏覽器在渲染的時候，這些複數空格只會被顯示為單一空格，意即多的空格會被省略。
同樣的情況也發生在換行符上。因此下列兩段程式碼實際在瀏覽器中顯示時會是一樣的。[1]

<p id="noWhitespace">Dogs are silly.</p>

<p id="whitespace">Dogs
    are
        silly.</p>

雖然如此，為了讓程式碼更好閱讀，仍常會使用空格與換行符來排版。像是以空白行分隔不同區塊的程式碼；或是讓巢狀結構的內層元素以兩個空格縮排。[3]

如果真的需要顯示連續的空格，可以使用所謂的Character Entities[5]（或稱Character reference[6]）來達成。簡單來說，就是以 來表示空格。

顯示保留字元

在HTML中，<、>、"、''、&等是保留字元，因為是用這些符號來組成HTML的語法。

即便原本使用這些符號時不是出於這個目的，仍有可能會被當作是在表達標籤與屬性等語法。[1]
這個時候，就能使用剛剛提到的Character Entities（或稱Character reference）。
Character Entities（或稱Character reference）以&開頭，以;結尾。剛剛提到的保留字元，可以依下列表格作替換。[6]